<template>
  <view>
    <view class="wrap" :style="Height">
      <view class="u-tabs-box">
        <view class="dropdown">
          <view @click="dropdownShow = true">
            地区
          <u-icon name="arrow-down" size="24" style="margin-left: 10rpx;"></u-icon>
          </view>
        </view>
        <u-tabs-swiper id="target" active-color="#fed500" inactive-color="#000000" ref="tabs" :list="lists" :current="current"
          @change="change" bar-width="60"></u-tabs-swiper>
      </view>
      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
            <view class="page-box">
              <navigator class="scroll-view-item_H" v-for="(item,index) in latest" :key="index" url="/pages/Events/Latest/Latest?Name=2023健身跨年配队/篝火晚会(汕头)暨金维斯健身俱乐部会员年会">
                <view class="scroll-view-img_H">
                  <image src="/static/image/main.png" mode="aspectFit" class="scroll-view-img_H"></image>
                  <text class="iconfont icon-zhiding scroll-view-top_H" v-show="index === 0"></text>
                </view>
                <view class="scroll-view-text_H">
                  <view class="events-content">
                    <view class="events-title">
                      2023健身跨年配队/篝火晚会(汕头)暨金维斯健身俱乐部会员年会
                    </view>
                    <view class="events-price">￥<text class="u-font-18">298</text>/人</view>
                  </view>
                  <view class="events-content u-m-t-16">
                    <view class="u-flex">
                      <view class="events-time_img"><text class="iconfont icon-shijian events-time_img"></text></view>
                      <view><text>12月30日~12月31日</text></view>
                    </view>
                    <view class="u-flex events-time_r">
                      <view class="events-time_img"><text class="iconfont icon-didian events-time_img"></text></view>
                      <view><text>广东汕头</text></view>
                    </view>
                  </view>
                </view>
              </navigator>
              <view style="height: 50rpx;"></view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh1" @refresherrestore="onRestore">
            <view class="page-box">
              <navigator class="scroll-view-item_H" v-for="(item,index) in latest" :key="index" url="/pages/Events/Latest/Latest?Name=2023健身跨年配队/篝火晚会(汕头)暨金维斯健身俱乐部会员年会">
                <view class="scroll-view-img_H">
                  <image src="/static/image/main.png" mode="aspectFit" class="scroll-view-img_H"></image>
                  <text class="iconfont icon-zhiding scroll-view-top_H" v-show="index === 0"></text>
                </view>
                <view class="scroll-view-text_H">
                  <view class="events-content">
                    <view class="events-title">
                      2023健身跨年配队/篝火晚会(汕头)暨金维斯健身俱乐部会员年会
                    </view>
                    <view class="events-price">￥<text class="u-font-18">298</text>/人</view>
                  </view>
                  <view class="events-content u-m-t-16">
                    <view class="u-flex">
                      <view class="events-time_img"><text class="iconfont icon-shijian events-time_img"></text></view>
                      <view><text>12月30日~12月31日</text></view>
                    </view>
                    <view class="u-flex events-time_r">
                      <view class="events-time_img"><text class="iconfont icon-didian events-time_img"></text></view>
                      <view><text>广东汕头</text></view>
                    </view>
                  </view>
                </view>
              </navigator>
              <view style="height: 50rpx;"></view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <u-popup v-model="dropdownShow" mode="top">
      <view class="slot-content">
        <view class=""><text>选择地区</text></view>
      	<view class="item-box">
      		<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)" v-for="(item, index) in list" :key="index">
      			{{item.label}}
      		</view>
      	</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  var vm;
  export default {
    data() {
      return {
        lists: [{
            name: '最新'
          },
          {
            name: '回顾'
          },
        ],
        latest:[{},{},{},{},{},],
        review:[{},{},{},{},{},],
        current: 0,
        swiperCurrent: 0,
        tabsHeight: 0,
        dx: 0,
        triggered:true,
        list: [{
        		label: '地区1',
        		active: true,
        	},
        	{
        		label: '地区2',
        		active: false,
        	},
        	{
        		label: '地区3',
        		active: false,
        	},
        	{
        		label: '地区4',
        		active: false,
        	},
          {
          	label: '地区5',
          	active: false,
          },
          {
          	label: '地区6',
          	active: false,
          },
        ],
        mask: true,
        activeColor: '#fed500',
        Height:0,
        dropdownShow:false,
      };
    },
    onLoad() {
      vm = this;
    },
    mounted() {
      // #ifdef H5 || APP-PLUS
      uni.createSelectorQuery().in(this).select("#target").boundingClientRect(data => {
        this.Height = 'height: calc(100vh - '+(data.height+44)+'px);'
      }).exec() 
      // #endif
    
    },
    methods: {
      tagClick(index) {
      	this.list[index].active = !this.list[index].active;
      },
      reachBottom() {
        
      },
      // tab栏切换
      change(index) {
        this.swiperCurrent = index;
      },
      transition({
        detail: {dx}
      }) 
      {
        this.$refs.tabs.setDx(dx);
      },
      animationfinish({
        detail: {
          current
        }
      }) 
      {
        this.$refs.tabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      },

      /**
       * 自定义下拉刷新控件被下拉
       */
      onPulling(){
        this.triggered = true
      },
      
      /**
       * 自定义下拉刷新被触发
       */
      onRefresh(){
        setTimeout(()=>{
          this.onRestore()
        },1000)
      },
      onRefresh1(){
        setTimeout(()=>{
          this.onRestore()
        },1000)
      },
      
      /**
       * 自定义下拉刷新被中止
       */
      onRestore(){
        this.triggered = false
      }
    }
  };
</script>



<style lang="scss" scoped>
  .wrap {
    display: flex;
    flex-direction: column;
    /* #ifdef MP-WEIXIN */
    height: calc(100vh - var(--window-top));
    /* #endif */
    width: 100%;
  }
  .swiper-box {
    flex: 1;
  }
  .swiper-item {
    height: 100%;
  }
  .img{
    width: 100%;
    height: 100%;
  }
  .page-box{
    padding: 0 32rpx;
  }
  .scroll-view-item_H{
    width: 100%;
    height: 420rpx;
    border-radius: 28rpx;
    margin-top: 32rpx;
    .scroll-view-img_H{
      width: 100%;
      height: 264rpx;
      min-height: 264rpx;
      position: relative;
      border-top-left-radius: 28rpx;
      border-top-right-radius: 28rpx;
      overflow: hidden;
    }
    .scroll-view-top_H{
      position: absolute;
      bottom: -22rpx;
      left: -4rpx;
      z-index: 1;
      font-size: 72rpx;
      color: #fed500;
    }
    .scroll-img{
      width: 100%;
      height: 100%;
      
    }
    .scroll-view-text_H{
      height: 159rpx;
      padding: 12rpx 24rpx;
      border-bottom-left-radius: 28rpx;
      border-bottom-right-radius: 28rpx;
      box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
      background-color: #fff;
      .events-content{
        width: 100%;
        display: flex;
        .events-title{
          width: 460rpx;
        }
        .events-price{
          margin-left: auto;
        }
      }
      .events-time_img{
        width: 32rpx;
        height: 32rpx;
        font-size: 32rpx;
        margin-right: 12rpx;
      }
      .events-time_r{
        margin-left: auto;
      }
    }
  }
  .dropdown{
    position: absolute;
    height: 100rpx;
    padding: 32rpx;
    z-index: 11;
  }
</style>
